<template>
  <div>
    <div style="height: 100px">
      <div style="text-align: left; padding-left: 5px; float: left">
        <el-select v-model="bianji.workTypeGuid" clearable placeholder=" " style="margin-top: 8px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div style="float: left; margin-top: 8px; margin-left: 30px">
        <span>タイトル&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-input v-model="bianji.workTile" placeholder=" " clearable style="width: 200px"></el-input>
      </div>
      <div style="float: right; margin-top: 5px; margin-right: 30px">
        <el-button type="primary" icon="el-icon-plus" style="margin-top: 3px" @click="saveJobtimereport" v-preventReClick>新規保存 </el-button>
        <el-button type="primary" icon="el-icon-edit" style="margin-top: 3px" @click="updataJobtimereport" v-preventReClick>保存 </el-button>
        <el-button type="primary" icon="el-icon-delete" style="margin-top: 3px" @click="remove">削除</el-button>
      </div>
    </div>
    <div>
      <section class="paper">
        <!-- <textarea type="text" id="bijiContent" name="bijiContent" class="form-control scrollable" placeholder="日報内容…"
          style="width: 90%; min-height: 630px; overflow: hidden"></textarea> -->

        <el-input type="textarea" :rows="18" placeholder="日報内容…" v-model="bianji.workCon"> </el-input>
      </section>
    </div>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data() {
    return {
      // 删除id
      removeId: {
        workNotesGuids: []
      },
      bianji: {
        workNotesGuid: '',
        workTypeGuid: '',
        workTile: '',
        workCon: ''
      },
      addJobtimereport: {
        userinfoGuid: 'b23b7e63b17147caae46e96939795466',
        workCon: '',
        workTile: '',
        workTypeGuid: ''
      },
      options: [
        {
          value: '4db5e5718ad9445c8193921e75351377',
          label: '日報'
        },
        {
          value: '079817ef717346c58e615f00e272f9d3',
          label: '週報'
        },
        {
          value: 'fa1d5ac800f543a9b4768f9bf9887d9d',
          label: '月報'
        }
      ]
    }
  },
  created() {
    this.addEdit()
  },
  methods: {
    // 新增工作日报信息
    async saveJobtimereport() {
      this.addJobtimereport.workCon = this.bianji.workCon
      this.addJobtimereport.workTile = this.bianji.workTile
      this.addJobtimereport.workTypeGuid = this.bianji.workTypeGuid
      const f = this.addJobtimereport
      console.log(this.addJobtimereport)
      // if (f.workCon === '' || f.workTile === '' || f.workTypeGuid === '') return this.$message.warning('データを空にしてはいけない')
      if (f.workTypeGuid === '') return this.$message.warning('タイプを選択してください')
      if (f.workTile === '') return this.$message.warning('タイトルをご入力してください')
      if (f.workCon === '') return this.$message.warning('日報内容をご入力してください')
      // 新增日报请求
      this.axios
        .post('/worknotes/insert', this.addJobtimereport)
        .then((res) => {
          console.log(res.data)
          if (res.data.success !== 1) {
            return this.$message.error(res.data.msg)
          }
          this.$message.success(this.$getMsg('I0001'))
          this.bianji.workTypeGuid = ''
          this.bianji.workTile = ''
          this.bianji.workCon = ''
          this.$emit('updataNode')
          this.$router.push('/Addreport')
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 获取工作日报详细信息
    addEdit() {
      this.axios
        .post('/worknotes/select', {
          workNotesGuid: this.id
        })
        .then((res) => {
          const tableData = res.data.data
          console.log(tableData)
          this.bianji.workTypeGuid = tableData.workTypeGuid
          this.bianji.workTile = tableData.workTile
          this.bianji.workCon = tableData.workCon
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 更新修改工作日报信息
    updataJobtimereport() {
      this.bianji.workNotesGuid = this.id
      if (this.bianji.workTypeGuid === '') return this.$message.warning('タイプを選択してください')
      if (this.bianji.workTile === '') return this.$message.warning('タイトルをご入力してください')
      if (this.bianji.workCon == '') return this.$message.warning('日報内容をご入力してください')
      this.axios
        .put('/worknotes/update', this.bianji)
        .then((res) => {
          if (res.data.success !== 1) {
            return this.$message.error(res.data.msg)
          }
          this.$message.success(this.$getMsg('I0002'))
          this.bianji.workTypeGuid = ''
          this.bianji.workTile = ''
          this.bianji.workCon = ''
          this.$emit('updataNode')
          this.$router.push('/Addreport')
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 删除工作日报信息
    remove() {
      this.removeId.workNotesGuids = []
      console.log(this.id)
      this.removeId.workNotesGuids[0] = this.id
      if (this.id === '') return this.$message.warning(this.$getMsg('W0001'))
      this.axios
        .delete('/worknotes/delete', { data: this.removeId })
        .then(() => {
          this.$message.success(this.$getMsg('I0003'))
          this.bianji.workTypeGuid = ''
          this.bianji.workTile = ''
          this.bianji.workCon = ''
          this.$emit('updataNode')
          this.$router.push('/Addreport')
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
  watch: {
    id: function (val) {
      this.addEdit()
    }
  }
}
</script>
<style scoped>
.paper {
  position: relative;
  background: -webkit-linear-gradient(to bottom, #f0f0f0 0%, white 5%) 0 0;
  background: -moz-linear-gradient(to bottom, #f0f0f0 0%, white 5%) 0 0;
  background: linear-gradient(to bottom, #f0f0f0 0%, white 5%) 0 0;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  background-size: 100% 30px;
  margin-left: 10px;
  margin-right: 10px;
}

.paper:before {
  content: '';
  position: absolute;
  width: 0px;
  top: 0;
  left: 39px;
  bottom: 0;
  border-left: 1px solid #f5f5f5;
}
</style>
